<!DOCTYPE html>
<!--[if IE]>  <html class="ie"> <![endif]-->
<html>

<head>
	<meta charset="utf-8" />
	<title>
	</title>
	<script type="text/javascript" src="src/jquery.js"></script>
	<script type="text/javascript" src="src/handlebars.js"></script>
	<script type="text/javascript" src="data.json"></script>
	<link rel="stylesheet" type="text/css" href="src/style.css" />
</head>

<body>
	<script id="table-template" type="text/x-handlebars-template">

		<div class="stl_01" style="top:{{top}}em; left:4.4125em;"><span class="stl_22 stl_11 stl_09">{{no}}</span></div>
		<div class="stl_01" style="top:{{top}}em; left:6em;">
			<span class="stl_22 stl_11 stl_18" style="word-spacing:1.1577em;">快车 {{[0]}}</span>
			<span class="stl_22 stl_11 stl_18" style="word-spacing:-0.0005em;">{{[1]}}</span>
			<span class="stl_22 stl_11 stl_18" style="word-spacing:-0.0005em;">{{[2]}}</span>
		</div>
		<div class="stl_01" style="top:{{top}}em; left:13.8em;"><span class="stl_22 stl_11 stl_09">{{[3]}} &nbsp;</span></div>					
		<div class="stl_01" style="top:{{top}}em; left:16.5em; width:10em; text-align:center"><span class="stl_22 stl_11 stl_15">{{[4]}} &nbsp;</span></div>
		<div class="stl_01" style="top:{{top}}em; left:26.5em; width:10em; text-align:center"><span class="stl_22 stl_11 stl_23">{{[5]}} &nbsp;</span></div>
		<div class="stl_01" style="top:{{top}}em; left:36.5em; text-align:center; width:3em;"><span class="stl_22 stl_11 stl_13">{{[6]}} &nbsp;</span></div>
		<div class="stl_01" style="top:{{top}}em; left:40em; text-align:center; width:3em;"><span class="stl_22 stl_11 stl_21">{{[7]}} &nbsp;</span></div>
    </script>
	<script type="text/javascript">
		function draw(value) {
			var myTemplate = Handlebars.compile($("#table-template").html());
			var first = 27.0529
			var other = 15.7196
			var page = 1;
			if (value.length > 12) {
				page = 1 + Math.ceil((value.length - 12) / 16)
			}
			var pos = first;
			var amount = 0.00;
			var count = 0
			value.forEach(function (v, i) {
				amount += parseFloat(v[7]);
			});
			$("#first #img").attr("data", "src/img_first.svg?c=" + count)
			$("#first #sum").text("共" + value.length + "笔行程， 合计 " + amount.toFixed(2) + "元");
			$("#first #apply").text("申请日期:" + apply)
			$("#first #phone").text("行程人手机号:" + phone)
			$("#first #fromto").text("行程起止日期:" + from + " 至 " + to)

			for (i = 0; i < value.length && i < 12; i++) {
				e = value[i];
				e.no = i+1
				e.top = pos
				a=myTemplate(e)
				$("#first #journey").append(myTemplate(e));
				pos += 2.58335;
				count++;
			}
			$("#first #pageno").text("页码：1/" + page)
			$("#first #img").attr("data", "src/img_first.svg?c=" + i)

			var index = 12;
			for (i = 1; i < page; i++) {
				pos = other
				$("#last #journey").empty();
				for (j = 0; index < value.length && j < 16; j++) {
					e = value[index];
					e.no = index + 1
					e.top = pos
					$("#last #journey").append(myTemplate(e));
					pos += 2.58335;
					count++;
					index++
				}
				$("#last #img").attr("data", "src/img_other.svg?c=" + j)
				$("#last #pageno").text("页码：" + (i + 1) + "/" + page)
				if (i < page - 1)
					$("#last").clone().attr("id", null).appendTo("#other")
			}
		};
		document.addEventListener('paste', function (e) {
			var clipboardData = e.clipboardData;
			if (!(clipboardData && clipboardData.items)) {
				return;
			}
			var copy_content = e.clipboardData.getData('text/plain');
			var it=new Array();
			copy_content.trim().split('\n').forEach(function (v, i) {
				it.push(v.trim().split(/[\s\t]+/))
				
			})
			$("#first #journey").empty()
			$("#other").empty()
			$("#last #journey").empty()
			draw(it)
			for (var i = 0, len = clipboardData.items.length; i < len; i++) {
				var item = clipboardData.items[i];
				if (item.kind === "string" && item.type == "text/plain") {
					item.getAsString(function (str) {
						// str 是获取到的字符串,创建文本框
						//处理粘贴的文字内容
					})
				} else if (item.kind === "file") {//file 一般是各种截图base64数据
					var pasteFile = item.getAsFile();
					// pasteFile就是获取到的文件
					var reader = new FileReader();
					reader.onload = function (event) {
						var base64Img = event.target.result;
					}; // data url  
					reader.readAsDataURL(pasteFile);
				}
			}

		});
		$(document).ready(function () {

			draw(data)

		});
	</script>
	<div id="first" class="stl_02 page">
		<div class="stl_03">
			<object id="img" data="src/img_first.svg" type="image/svg+xml" class="stl_04" style="position:absolute; width:49.5833em; height:70.1667em;">
			</object>
		</div>
		<div class="view">
			<div class="stl_05 stl_06">
				<div class="stl_01" style="top:6.1628em; left:16.625em;">
					<span class="stl_07 stl_08 stl_09">-</span>
				</div>
				<div class="stl_01" style="top:11.144em; left:16.9583em;">
					<span class="stl_10 stl_11 stl_09">滴滴出行—行程单 &nbsp;</span>
				</div>
				<div class="stl_01" style="top:13.8716em; left:20.2917em;">
					<span class="stl_12 stl_11 stl_13" style="word-spacing:-0.0004em;">DIDI TRAVEL - TRIP TABLE &nbsp;</span>
				</div>
				<div class="stl_01" style="top:16.7747em; left:3.5417em;">
					<span class="stl_14 stl_11 stl_09">ꢀ</span>
				</div>
				<div class="stl_01" style="top:16.7747em; left:4.2083em;">
					<span class="stl_14 stl_11 stl_15">姓名：</span>
					<span class="stl_16 stl_11 stl_15">____________________________________</span>
					<span class="stl_14 stl_11 stl_15">ꢀ工号：</span>
					<span class="stl_16 stl_11 stl_15">____________________________________</span>
					<span class="stl_14 stl_11 stl_15">ꢀ部门：</span>
					<span class="stl_16 stl_11 stl_15">____________________________________ &nbsp;</span>
				</div>
				<div class="stl_01" style="top:19.7747em; left:3.9583em;">
					<span id="apply" class="stl_17 stl_11 stl_18"></span>
				</div>
				<div class="stl_01" style="top:21.1081em; left:3.9583em;">
					<span id="phone" class="stl_17 stl_11 stl_19">行程人手机号:18600197482 &nbsp;</span>
				</div>
				<div class="stl_01" style="top:19.7747em; left:17.7083em;">
					<span id="fromto" class="stl_17 stl_11 stl_18" style="word-spacing:-0.0003em;">行程时间:2018-04-04 至 2018-06-21 &nbsp;</span>
				</div>
				<div class="stl_01" style="top:21.1081em; left:17.7083em;">
					<span id="sum" class="stl_17 stl_11 stl_19" style="word-spacing:-0.0003em;">共25笔行程， 合计 627.42元 &nbsp;</span>
				</div>
				<div class="stl_01" style="top:23.2815em; left:37.4167em;"><span class="stl_20 stl_11 stl_09">里程 &nbsp;</span></div>
				<div class="stl_01" style="top:23.2815em; left:40.75em;"><span class="stl_20 stl_11 stl_09">金额 &nbsp;</span></div>
				<div class="stl_01" style="top:24.6982em; left:40.8683em;"><span class="stl_20 stl_11 stl_21">[元] &nbsp;</span></div>
				<div class="stl_01" style="top:23.9898em; left:3.875em;"><span class="stl_20 stl_11 stl_09" style="word-spacing:0.6453em;">序号 车型 &nbsp;</span></div>
				<div class="stl_01" style="top:23.9898em; left:9em;"><span class="stl_20 stl_11 stl_09">上车时间 &nbsp;</span></div>
				<div class="stl_01" style="top:23.9898em; left:13.9792em;"><span class="stl_20 stl_11 stl_09" style="word-spacing:-0.0009em;">城 市 &nbsp;</span></div>
				<div class="stl_01" style="top:23.9898em; left:20.75em;"><span class="stl_20 stl_11 stl_09">起点 &nbsp;</span></div>
				<div class="stl_01" style="top:23.9898em; left:30.75em;"><span class="stl_20 stl_11 stl_09">终点 &nbsp;</span></div>
				<div class="stl_01" style="top:23.9898em; left:44.2917em;"><span class="stl_20 stl_11 stl_09">备注 &nbsp;</span></div>
				<div class="stl_01" style="top:24.6982em; left:37.1808em;"><span class="stl_20 stl_11 stl_19">[公里] &nbsp;</span></div>
				<div id="journey"></div>

				<div class="stl_01" style="top:65.8581em; left:42.5em;">
					<span id="pageno" class="stl_17 stl_11 stl_23">页码：1/1 &nbsp;</span>
				</div>
			</div>
		</div>
	</div>
	<div id="other"></div>
	<div id="last" class="stl_02 page">
		<div class="stl_03">
			<object id="img" data="src/img_other.svg" type="image/svg+xml" class="stl_04" style="position:absolute; width:49.5833em; height:70.1667em;">
			</object>
		</div>
		<div class="view">
			<div class="stl_05 stl_06">
				<div class="stl_01" style="top:6.1628em; left:16.625em;"><span class="stl_07 stl_08 stl_09">-</span></div>
				<div class="stl_01" style="top:11.9482em; left:37.4167em;"><span class="stl_20 stl_11 stl_09">里程 &nbsp;</span></div>
				<div class="stl_01" style="top:11.9482em; left:40.75em;"><span class="stl_20 stl_11 stl_09">金额 &nbsp;</span></div>
				<div class="stl_01" style="top:13.2648em; left:40.8683em;"><span class="stl_20 stl_11 stl_21">[元] &nbsp;</span></div>
				<div class="stl_01" style="top:12.6565em; left:3.875em;"><span class="stl_20 stl_11 stl_09" style="word-spacing:0.6453em;">序号 车型 &nbsp;</span></div>
				<div class="stl_01" style="top:12.6565em; left:9em;"><span class="stl_20 stl_11 stl_09">上车时间 &nbsp;</span></div>
				<div class="stl_01" style="top:12.6565em; left:13.9792em;"><span class="stl_20 stl_11 stl_09" style="word-spacing:-0.0009em;">城 市 &nbsp;</span></div>
				<div class="stl_01" style="top:12.6565em; left:20.75em;"><span class="stl_20 stl_11 stl_09">起点 &nbsp;</span></div>
				<div class="stl_01" style="top:12.6565em; left:30.75em;"><span class="stl_20 stl_11 stl_09">终点 &nbsp;</span></div>
				<div class="stl_01" style="top:12.6565em; left:44.2917em;"><span class="stl_20 stl_11 stl_09">备注 &nbsp;</span></div>
				<div class="stl_01" style="top:13.2648em; left:37.1808em;"><span class="stl_20 stl_11 stl_19">[公里] &nbsp;</span></div>
				<div id="journey"></div>
				<div class="stl_01" style="top:65.8581em; left:42.5em;">
					<span id="pageno" class="stl_17 stl_11 stl_23">页码：2/2 &nbsp;</span>
				</div>
			</div>
		</div>
	</div>

</body>

</html>